<template>
  <div class="AddStaff">
    <h5 v-if="state == 'add'">新增门店员工</h5>
    <h5 v-else-if="state == 'edit'">编辑门店员工</h5>
    <h5 v-else>新增门店员工</h5>
    <div class="ele-title">
      <span>填写员工信息</span>
    </div>
    <div class="ele-form">
      <el-form ref="validate" :model="BindForm" :rules="pattern" label-position="left" label-width="140px">
        <el-form-item label="姓名:" prop="staffName">
          <el-col :span="5">
            <el-input
              v-model="BindForm.staffName"
              maxlength="6"
              placeholder="请输入姓名"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="员工类型:" prop="staffType">
          <el-col :span="5">
            <el-radio
              v-model="BindForm.staffType"
              label="1"
            >有运维后台</el-radio>
            <el-radio
              v-model="BindForm.staffType"
              label="0"
            >无运维后台</el-radio>
          </el-col>
        </el-form-item>
        <el-form-item label="联系方式:" prop="contactInformation">
          <el-col :span="5">
            <el-input
              v-model="BindForm.contactInformation"
              maxlength="11"
              minlength="11"
              placeholder="请输入与微信绑定一致的手机号"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="门店:" prop="storeId">
          <el-col :span="5">
            <el-select
              v-model="BindForm.storeId"
              clearable
              filterable
              multiple
              collapse-tags
              style="width:100%"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :value="item.id"
                :label="item.storeName"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="云仓:" prop="cloudId">
          <el-col :span="5">
            <el-select
              v-model="BindForm.cloudId"
              clearable
              filterable
              multiple
              collapse-tags
              style="width:100%"
            >
              <el-option
                v-for="(item, index) in cloudOptions"
                :key="index"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="角色:" prop="role">
          <el-col :span="12">
            <el-checkbox-group v-model="BindForm.role" @change="handelCheck">
              <el-checkbox label="0">配货员</el-checkbox>
              <el-checkbox label="1">配送员</el-checkbox>
              <el-checkbox label="2">维护</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-form-item>
        <el-form-item
          v-if="BindForm.role.includes('2') || BindForm.role.includes('1')"
          label="IC卡卡号:"
          prop="cardNumber"
        >
          <el-col :span="5">
            <el-input v-model="BindForm.cardNumber" placeholder="请输入卡号" />
          </el-col>
        </el-form-item>
        <div class="ele-title" style="margin-bottom: 22px">
          <span>群设置</span>
        </div>
        <el-form-item label="群聊名称:" prop="groupName">
          <el-col :span="5">
            <el-input
              v-model="BindForm.groupName"
              maxlength="50"
              placeholder="请输入群聊名称"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="最多50个utf8字符，超过将截断。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="群主ID:" prop="groupManager">
          <el-col :span="5">
            <el-input
              v-model="BindForm.groupManager"
              maxlength="20"
              placeholder="请输入群主ID"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="员工企业微信ID:" prop="staffWechatName">
          <el-col :span="5">
            <el-input
              v-model="BindForm.staffWechatName"
              maxlength="32"
              placeholder="请输入员工企业微信ID"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="群成员ID:" prop="groupMembers">
          <el-col :span="5">
            <el-input
              v-model="BindForm.groupMembers"
              placeholder="请输入群成员ID"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="群成员id列表,至少2人，至多2000人。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width:200px;margin-left:100px"
            type="primary"
            :loading="loading"
            @click="handelSubmit"
          >提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
/** 添加员工 */
import {
  StaffMangeAdd,
  StaffMangeUpdate
} from '@/api/customAPI/shop/staffManage'
import validate from '@/utils/formValidate'
import { storeList } from '@/api/customAPI/shop/store'
import { gloudWarehouseList } from '@/api/customAPI/shop/GloudWarehouse'
export default {
  name: 'AddStaff',
  data() {
    var valiCloudOrStore = (rule, value, callback) => {
      if (this.BindForm.storeId.length == 0 && this.BindForm.cloudId.length == 0) {
        callback(new Error('请至少选择一个云仓或至少选择一个门店'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      options: [],
      cloudOptions: [],
      state: '',
      BindForm: {
        role: [],
        staffName: '',
        staffType: '1',
        contactInformation: '',
        storeId: [],
        cloudId: [],
        staffRole: '',
        cardNumber: '',
        groupName: '',
        groupManager: '',
        staffWechatName: '',
        groupMembers: '',
        wechatGroupId: ''
      },
      store: {
        // shopId: localStorage.getItem('shopId'),
        province: '',
        city: '',
        area: '',
        searchKey: '',
        page: 1,
        limit: 0
      },
      cloud: {
        keySearch: '',
        shopId: localStorage.getItem('shopId'),
        page: 1,
        limit: 0
      },
      pattern: {
        staffName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, message: '请输入至少两位', trigger: 'change' }
        ],
        staffType: [{ required: true, message: '请输入员工类型', trigger: 'blur' }],
        contactInformation: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            validator: validate.validatePhone,
            trigger: ['change', 'blur']
          }
        ],
        storeId: [
          {
            validator: valiCloudOrStore,
            trigger: ['change', 'blur']
          }
        ],
        cloudId: [
          {
            validator: valiCloudOrStore,
            trigger: ['change', 'blur']
          }
        ],
        role: [{ required: true, message: '选择角色', trigger: 'blur' }],
        cardNumber: [
          { required: true, message: '请输入IC卡', trigger: 'blur' },
          {
            max: 20,
            message: '超过指定20位长度',
            trigger: 'change'
          }
        ],
        groupName: [{ required: true, message: '请输入群聊名称', trigger: 'blur' }],
        groupManager: [
          { required: true, message: '请输入群主id', trigger: 'blur' },
          {
            validator: validate.isCompanyWeChat,
            trigger: ['change', 'blur']
          }
        ],
        staffWechatName: [
          { required: true, message: '请输入员工企业微信id', trigger: 'blur' },
          {
            validator: validate.isCompanyWeChat,
            trigger: ['change', 'blur']
          }
        ],
        groupMembers: [
          { required: true, message: '请输入群成员id', trigger: 'blur' },
          {
            validator: validate.isChar,
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },
  created() {
    this.loadding()
  },
  mounted() {
    this.loadding()
  },
  activated() {
    this.loadding()
  },
  methods: {
    loadding() {
      gloudWarehouseList(this.cloud).then(res => {
        this.cloudOptions = res.data.data.data
        storeList(this.store).then(result => {
          this.options = result.data.data.list
          const params = this.$dd(this.$route.query.p)
          if (params && params.storeId) {
            this.BindForm.storeId = [params.storeId.toString()]
          } else {
            this.state = params.state
            switch (params.state) {
              case 'edit':
                this.BindForm.id = params.row.id
                this.BindForm.staffName = params.row.userName
                this.BindForm.role = params.row.roles.split(',')
                this.BindForm.storeId = params.row.storeInfo.map(inf =>
                  inf.storeId.toString()
                )
                this.BindForm.cloudId = params.row.agedmallCloudHouses.map(info =>
                  info.id
                )
                this.BindForm.cardNumber = params.row.icCard
                this.BindForm.contactInformation = params.row.phone
                this.BindForm.staffType = params.row.hasSystem.toString()
                this.BindForm.groupName = params.row.groupName
                this.BindForm.groupManager = params.row.groupManager
                this.BindForm.staffWechatName = params.row.wechatId
                this.BindForm.groupMembers = params.row.groupMembers
                this.BindForm.wechatGroupId = params.row.wechatGroupId
                break

              default:
                console.log('添加')
                break
            }
          }
        })
      })
    },
    handelCheck(v) {
      console.log(v)
      if (!v.includes('2')) {
        this.BindForm.cardNumber = ''
      }
    },
    /** 提交 */
    handelSubmit() {
      this.loading = true
      this.$refs.validate.validate(v => {
        if (v) {
          const data = {
            staffName: this.BindForm.staffName,
            staffType: this.BindForm.staffType,
            contactInformation: this.BindForm.contactInformation,
            staffRole: this.BindForm.role.toString(),
            cardNumber: this.BindForm.cardNumber,
            groupName: this.BindForm.groupName,
            groupManager: this.BindForm.groupManager,
            staffWechatName: this.BindForm.staffWechatName,
            groupMembers: this.BindForm.groupMembers
          }
          if (this.BindForm.storeId.length > 0) {
            data['storeId'] = this.BindForm.storeId.toString()
          }
          if (this.BindForm.cloudId.length > 0) {
            data['cloudId'] = this.BindForm.cloudId.toString()
          }
          switch (this.state) {
            case 'edit':
              if (this.BindForm.id) {
                data['id'] = this.BindForm.id
              }
              StaffMangeUpdate(data)
                .then(result => {
                  this.$message.success('成功')
                  this.loading = false
                  this.$store.dispatch('tagsView/delView', this.$route)
                  this.$router.go(-1)
                  this.$refs.validate.resetFields()
                })
                .catch(() => {
                  this.loading = false
                })
              break

            default:
              StaffMangeAdd(data)
                .then(result => {
                  this.$message.success('成功')
                  this.$store.dispatch('tagsView/delView', this.$route)
                  this.$router.go(-1)
                  this.$refs.validate.resetFields()
                  this.loading = false
                })
                .catch(() => {
                  this.loading = false
                })
              break
          }
        } else {
          this.loading = false
        }
      })
    }
  }
  /* beforeRouteLeave(to, from, next) {
    this.$store.dispatch('tagsView/delView', from)
    next()
  }*/
  /* beforeRouteEnter(to, from, next) {
    if (to.params.state === 'edit') {
      to.meta.title = '编辑门店员工'
    } else {
      to.meta.title = '新增门店员工'
    }
    next()
  }*/
}
</script>

<style lang="scss" scoped>
.AddStaff {
  padding: 50px 100px;
  .ele-title {
    height: 50px;
    line-height: 50px;
    background: #f3f3f3;
    border-radius: 5px;
    padding-left: 20px;
  }
  .ele-form {
    margin-top: 30px;
    ::v-deep.el-form {
      .el-form-item__label {
        width: 100px;
        text-align: start;
      }
      /*.el-form-item__error {
        margin-left: 0;
      }*/
    }
  }
}
</style>
